<template>
<div class="pageHome" @mousewheel="rollImg">
  <!-- 右键菜单 -->
  <au-image-right-menu ref="auRightMenu" :scale="scale" :image-base64="imageBase64"></au-image-right-menu>
  <div class="page" ref="page" v-if="data && imageBase64" @scroll="updaterPageInfo">
    <div class="imgContainer" :style="{width:(imageSize.width+50)+'px',height:imageSize.height+'px'}">
      <img @click.right="onContextmenu" draggable="false" ref="image" :style="{width:imageSize.width+'px',height:imageSize.height+'px'}" :src="imageBase64"/>
      <!--选择窗口-->
      <au-image-cart ref="imageCart" v-if="isShowCart" :scale="scale" @on-query="curQuery" :imageSize="imageSize" :imageBase64="imageBase64" :cartSize="cartSize"
        @close="closeCart" @on-point="cartPoint"></au-image-cart>
    </div>
  </div>
  <div v-else class="center">
    无任何图片
  </div>
  <div class="rightTool">
    <!--小地图-->
    <au-image-map ref="map" :size="imageSize" @on-point="({x,y})=>{$refs.page.scrollTo(x,y)}" :page-size="pageSize" :image="imageBase64"></au-image-map>
    <!--工具栏-->
    <au-image-tools v-model:isShowHome="isShowHome" v-model:imageFactSize="imageFactSize" v-model:image-base64="imageBase64"
                    v-model:isShowCart="isShowCart" v-model:cartSize="cartSize" v-model:pageSize="pageSize"
                    v-model:scale="scale" v-model:data="data"></au-image-tools>
  </div>
</div>
</template>

<script>
import {mapState ,mapGetters} from "vuex"
import {ipcRenderer} from "electron";
import auImageMap from "@/components/comm/auImageMap";
import auImageCart from "@/components/comm/auImageCart";
import { ElMessage } from 'element-plus'
import AuImageRightMenu from "@/components/comm/auImageRightMenu";
import AuImageTools from "@/components/comm/auImageTools";

export default {
  name: "auImage",
  data(){
    return {
      scale:100,
      imageBase64:"",
      isShowCart:false,
      imageFactSize:{
        width:0,
        height:0
      },
      pageSize:{
        width:0,
        height:0,
        top:0,
        left:0,
      },
      cartSize:{
        width:0,
        height:0,
        top:0,
        left:0,
      },
      closeEvent:[],
      isShowHome:true
    }
  },
  components:{
    AuImageTools,
    AuImageRightMenu,
    auImageMap,auImageCart
  },
  computed:{
    imageSize(){
      let size=this.imageFactSize;
      return {
        width:size.width*this.scale/100,
        height:size.height*this.scale/100,
      }
    },
    ...mapState({
      dataList: state => state.dataList,
      selectedIndex: state => state.selectedIndex,
    }),
    data(){
      return this.dataList[this.index];
    }
  },
  props:{
    index:{
      default:0,
      type:Number
    }
  },
  watch:{
    dataList:{
      deep:true,
      handler(val){
        console.log("刷新了",this.dataList);
      }
    },
    imageSize:{
      deep:true,
      handler({width,height,top,left},oVal) {
        //缩放后/缩放前
        let bs=width/oVal.width;
        //同步缩放选择
        let cartSize=this.cartSize.soll;

        if(this.isShowCart && cartSize){
          this.cartSize.width=cartSize.width*bs;
          this.cartSize.height= cartSize.height*bs;
          this.cartSize.top= cartSize.top*bs;
          this.cartSize.left= cartSize.left*bs;
        }
      }
    },
  },
  methods:{
    onContextmenu(e){
      this.$refs.auRightMenu.show(e);
    },
    //裁剪确定
    curQuery(info){
      console.log(info)
      ipcRenderer.invoke("image-cart",{
        image:this.imageBase64,
        info:info,
        id:this.data.id
      }).then(res=>{
        if(res){
          this.imageBase64=res;
          this.getSize();
          this.initMonitor();
          this.isShowCart=false;
          this.isShowHome=true;
        }
      })
    },
    //裁剪移动
    cartPoint({x,y,width,height}){
      if(width<30 || height<30){
        return;
      }
      if(x)this.cartSize.left=x;
      if(y)this.cartSize.top=y;
      if(width)this.cartSize.width=width;
      if(height)this.cartSize.height=height;
    },
    closeCart(){
      this.isShowCart=false
      this.isShowHome=true
    },
    //获取图片真实大小
    getSize(){
      if(!this.data){
        return {width:0,height:0}
      }
      let img = new Image()
      img.src = this.imageBase64;
      img.onload=()=>{
        this.imageFactSize={
          width:img.width,
          height:img.height,
        };
      }
    },
    updaterPageInfo(){
      this.pageSize.width=this.$refs.page.offsetWidth;
      this.pageSize.height=this.$refs.page.offsetHeight;
      this.pageSize.left=this.$refs.page.scrollLeft;
      this.pageSize.top=this.$refs.page.scrollTop;
      this.pageSize.scrollWidth=this.$refs.page.scrollWidth;
      this.pageSize.scrollHeight=this.$refs.page.scrollHeight;
      if(this.imageFactSize.width!=0 && this.imageFactSize.height!=0){
        this.$refs.map && this.$refs.map.updaterShowSize();
      }
    },
    //在缩放前保存，按下ctrl的时候保存
    saveCartSize(){
      this.cartSize.soll={
        width:this.cartSize.width,
        height:this.cartSize.height,
        top:this.cartSize.top,
        left:this.cartSize.left,
      };
    },
    //滚动放大图片
    rollImg(e){
      if(!this.$key.ctrl){
        return ;
      }
      let zoom=this.scale;
      let bs=e.wheelDelta / 12;
      zoom += bs;
      if (zoom >= 15 && zoom <=320) {
        if(this.isShowCart){
          //保存截图区域与图片的比例，以便同步缩放
          this.saveCartSize();
        }
        this.scale = zoom;
      }
      return false;
    },
    //初始化监听
    initMonitor(){
      this.$nextTick(()=>{
        this.updaterPageInfo();
        let timer=setInterval(()=>{
          if(this.imageFactSize.width!=0 && this.imageFactSize.height!=0){
            this.$refs.map && this.$refs.map.updaterShowSize(this.imageFactSize,this.pageSize);
            clearInterval(timer)
          }
        },100);

        let _this=this;
        this.$refs.page.addEventListener("scroll",(e)=>{

          _this.updaterPageInfo();
        });
        let resize=(e)=>{
          this.updaterPageInfo();
        };
        window.addEventListener('resize',resize);
        //注册关闭
        this.closeEvent.push(function(){
          window.removeEventListener('resize',resize,false)
        })
      })
    }
  },
  mounted(){
    console.log(this.data)
    this.imageBase64=this.data.image;
    this.getSize();
    this.initMonitor();
  },
  created() {

  },
  beforeUnmount(){
    this.closeEvent.forEach((fn)=>fn && fn())
  }
}
</script>

<style scoped lang="scss">
@import "../styles/auImage";

</style>
